<script setup>
import { inject, ref } from "vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";

import { isPayPassApi, checkPayPass } from "@/services/user";

import { rolledlist, lowerCount, rolledcount } from "@/services/team";
const panme = ref({
  page: 1,
  limit: 20,
  product_type: 1,
});

const product_type = ref(1);

const loading = ref(true);
const status = ref("more");
// const formdata = ref({
//   keyword: "",
//   type: "",
//   level_id: "",
//   month: "",
//   agent_grade: "",
// });
onLoad((e) => {
  // debugger;
  if (e.type > 500) {
    panme.value.product_type = 2;
    product_type.value = 2;
  }

  // formdata.value.level_id = e.type || "101";
  // if (e.type > 500) {
  //   formdata.value.type = 1;
  // } else {
  //   formdata.value.type = 2;
  // }

  getlist();
  getrolledcountlist();
  // lowerCountfun();
});

//下拉触底
onReachBottom(() => {
  getlist();
});

const list1 = ref([
  {
    name: "全部",
  },
  {
    name: "已使用",
  },
  {
    name: "未使用",
  },
]);

const list = ref([]);
const numtoll = ref(0);
const showPassword = ref(false);
const isPayPass = ref(0);
const Passwordtext = ref("");
const pay_pass = ref("");
// const qrshfun = async () => {};
const gocancle = () => {
  showPassword.value = false;
  pay_pass.value = "";
};

const copyfun = async (num, pass) => {
  try {
    let res = await isPayPassApi();
    if (res.code == 200) {
      isPayPass.value = res.data;
      if (res.data == 1) {
        Passwordtext.value = "券号：" + num + "密码：" + pass;
        showPassword.value = true;
        pay_pass.value = "";
        setTimeout(() => {
          focusinput.value = true;
        }, 500);
      } else {
        uni.showToast({
          title: "没有支付密码，前往设置",
          icon: "none",
        });

        setTimeout(() => {
          uni.navigateTo({
            url:
              "/pages/mysetting/modify/index?isshowPassword=" + isPayPass.value,
          });
        }, 500);
      }
    }
  } catch (e) {
    showPassword.value = false;
    pay_pass.value = "";
    focusinput.value = false;
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
  return;
};
const ispay = ref(false);
const gepaymentfun = async () => {
  let res = await checkPayPass({ pay_pass: pay_pass.value });
  if (res.code == 200) {
    // 防止小程序输入密码重复支付
    if (!ispay.value) {
      ispay.value = true;
    } else {
      return;
    }
    uni.setClipboardData({
      data: Passwordtext.value, //要被复制的内容store-titlestore-title
      success: () => {
        //复制成功的回调函数
        showPassword.value = false;
        pay_pass.value = "";
        focusinput.value = false;
        uni.showToast({
          //提示
          title: "复制成功",
        });
      },
    });
  } else {
    showPassword.value = false;
    pay_pass.value = "";
    focusinput.value = false;
  }
};

async function getlist() {
  let res = await rolledlist(panme.value);
  if (res.code == 200) {
    list.value = list.value.concat(res.data.list);

    if (res.data.list.length < panme.value.limit) {
      status.value = "no-more";
    } else {
      status.value = "more";
    }
    loading.value = false;
    if (res.data.list.length > 0) {
      panme.value.page = panme.value.page + 1;
    }
  }
}
async function getrolledcountlist() {
  let res = await rolledcount(panme.value);
  if (res.code == 200) {
    numtoll.value = res.data.total;
    list1.value[1].name =
      res.data.count_yes > 0 ? `已使用(${res.data.count_yes})` : "已使用";
    list1.value[2].name =
      res.data.count_no > 0 ? `未使用(${res.data.count_no})` : "未使用";

    // list.value = res.data.list;
  }
}

// async function lowerCountfun() {
//   let res = await lowerCount(formdata.value);
//   if (res.code == 200) {
//     list.value = res.data.list;
//   }
// }

const changetabs = (item, index) => {
  panme.value.page = 1;
  list.value = [];
  if (panme.value.is_use && panme.value.is_use == index) {
    return;
  }
  if (index === 0) {
    delete panme.value.is_use;
  } else if (index === 2) {
    panme.value.is_use = 0;
  } else {
    panme.value.is_use = index;
  }

  getlist();
};
const goktfun = (item) => {
  uni.navigateTo({
    url:
      "/pages/team/shopkeeper/openQuota?product_type=" +
      product_type.value +
      "&id=" +
      item.id,
  });
};

const detfun = (item) => {
  uni.navigateTo({
    url: "/pages/team/detail/index?id=" + item.id,
  });
};
// import { onLoad, onShow } from "@dcloudio/uni-app";

// 定义 finish 方法
const finish = async (e) => {
  pay_pass.value = e;
  try {
    let res = await checkPayPass({ pay_pass: pay_pass.value });
    if (res.code == 200) {
      gepaymentfun();
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
    pay_pass.value = "";
  }
};

const forgot = () => {
  uni.navigateTo({
    url: "/pages/mysetting/modify/index?isshowPassword=" + isPayPass.value,
  });
};
const focusinput = ref(false);

const close = () => {
  showPassword.value = false;
  pay_pass.value = "";
  focusinput.value = false;
};
</script>

<template>
  <view class="quotaVoucher">
    <view class="notice">
      <view class="notice-box">
        <image
          src="@/static/team/shopkeeper/notice.png"
          mode="widthFix"
        ></image>
        <view class="notice-text">名额赠送兑换后不可撤回，请谨慎操作</view>
      </view>
    </view>
    <view class="explain">
      <view class="explain-title">使用说明</view>
      <view class="explain-text"
        >您可以将券号及密码复制给好友，好友升级店主时，选择使用兑换码，即可开通对应的身份。<br />
        兑换码升级的身份不含“赠品奖励”，不计算直推升级奖励。
        该身份有效期为5年，以赠送成功之日起算。</view
      >
    </view>

    <view class="give-item">
      <view class="give-box">
        <view class="give-box-top">
          {{
            product_type == 1
              ? "赠送升级券名额（人）"
              : "赠送区级代理商名额（名）"
          }}
        </view>
        <view class="give-box-footer">{{ numtoll }}</view>
      </view>
    </view>

    <view class="tabs">
      <!-- lineWidth="38" -->
      <u-tabs
        :list="list1"
        lineColor="#01ADA8"
        :itemStyle="{ padding: '20rpx 66rpx' }"
        @change="changetabs"
      ></u-tabs>
    </view>

    <!-- <view class="nodeta" v-if="shownodate && list.length <= 0">
        <image src="@/static/nodate/datas.png" mode="widthFix" />
      </view> -->

    <view v-for="(item, index) in list" :key="index" @click.stop="detfun(item)">
      <view class="notuse" v-if="!item.verify_time">
        <view class="notuse-top" v-if="item.level && item.level.name"
          >{{
            item.level && item.level.name ? item.level.name : ""
          }}身份兑换券</view
        >
        <view class="notuse-top" v-if="item.grade && item.grade.name"
          >{{
            item.grade && item.grade.name ? item.grade.name : ""
          }}身份兑换券</view
        >
        <view class="notuse-right">未使用</view>
        <view class="notuse-fotter"
          >券号：{{
            item.verify_code_arr && item.verify_code_arr.num
              ? item.verify_code_arr.num
              : ""
          }}</view
        >
        <view class="circle-left"></view>
        <view class="circle-right"></view>
        <u-line dashed length="90%" class="notuse-line"></u-line>
        <view class="notuse-btn">
          <view class="notuse-btn-left" @click.stop="goktfun(item)"
            >为他人开通</view
          >
          <!-- <up-copy
            :content="
              item.verify_code_arr && item.verify_code_arr.num
                ? item.verify_code_arr.num
                : ''
            "
            @click.stop
            > -->
          <view
            class="notuse-btn-right"
            @click.stop="
              copyfun(
                item.verify_code_arr && item.verify_code_arr.num
                  ? item.verify_code_arr.num
                  : '',
                item.verify_code_arr && item.verify_code_arr.pass
                  ? item.verify_code_arr.pass
                  : ''
              )
            "
            >复制券号及密码</view
          >
          <!-- </up-copy
          > -->
        </view>
      </view>

      <view class="used" v-if="item.verify_time">
        <view class="used-top"
          >{{
            item.level && item.level.name ? item.level.name : ""
          }}身份兑换券</view
        >
        <view class="used-right">已使用</view>
        <view class="used-fotter"
          >券号：{{
            item.verify_code_arr && item.verify_code_arr.num
              ? item.verify_code_arr.num
              : ""
          }}</view
        >
      </view>
    </view>
    <uni-load-more color="#c6c5c3" :status="status" v-if="list.length > 0" />
  </view>
  <view class="nodeta" v-if="!loading && list.length <= 0">
    <image src="@/static/nodate/datas.png" mode="widthFix" />
  </view>

  <!-- 密码弹框 -->
  <view class="password_show">
    <u-popup
      :show="showPassword"
      mode="center"
      round="10"
      @close="close"
      @open="open"
    >
      <view class="password">
        <view class="popup-content-title">支付密码</view>
        <u-code-input
          v-model="pay_pass"
          :maxlength="6"
          dot
          size="80"
          @change="onChange"
          @finish="finish"
          :focus="focusinput"
        ></u-code-input>
        <view class="footer">
          <view class="closefun" @click="showPassword = false">取消</view>
          <view class="forgot" @click="forgot">忘记密码？</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style lang="scss" scoped>
@import "./quotaVoucher.scss";
</style>
